<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row :gutter="24">
            <a-col :md="12" :sm="24">
              <a-form-item label="法人行" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                <a-select mode="default" :allowClear="true" style="width: 100%" @change="handleInstChange"
                  v-model="queryParams.instId">
                  <a-select-option v-for="r in instIdData" :key="r.label">{{ r.label }}-{{ r.value }}</a-select-option>
                </a-select>
                <!--                <a-input v-if="!this.user.admin" v-model="queryParams.instId" :value="this.user.instId"
                         readonly="readonly"/>-->
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" v-show="queryParams.instId != ''">
              <a-form-item label="终端品牌代码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                <a-input placeholder="终端品牌代码、终端品牌名称、终端品牌描述..." v-model="queryParams.brandCND" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div style="text-align: center; " v-show="queryParams.instId != ''">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </div>
      </a-form>
    </div>
    <div v-show="queryParams.instId != ''">
      <div class="operator">
        <a-button v-hasPermission="['brand:add']" ghost type="primary" @click="add">新增</a-button>
        <a-button v-hasPermission="['brand:import']" ghost type="primary" @click="upload">导入</a-button>
      </div>
      <!-- 表格区域 -->
      <a-table ref="TableInfo" :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"
        :pagination="pagination" :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :scroll="{ x: 2200 }"
        @change="handleTableChange">
        <template slot="modelOperation" slot-scope="text, record">
          <a-button v-hasPermission="['model:admin']" type="primary" @click="terminalModelAdmin(record)">终端型号管理
          </a-button>
          <a-badge v-hasNoPermission="['model:admin']" userStatus="warning" text="无权限"></a-badge>
        </template>
        <template slot="email" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <div>{{ text }}</div>
            </template>
            <p style="width: 150px;margin-bottom: 0">{{ text }}</p>
          </a-popover>
        </template>
        <template slot="brandOperation" slot-scope="text, record">
          <a-icon v-hasPermission="['brand:update']" type="setting" theme="twoTone" twoToneColor="#4a9ff5"
            @click="editBrand(record)" title="修改品牌"></a-icon>&nbsp;
          <a-icon v-hasPermission="['brand:view']" type="eye" theme="twoTone" twoToneColor="#42b983"
            @click="viewBrand(record)" title="查看品牌"></a-icon>
          <a-badge v-hasNoPermission="['brand:update', 'brand:view']" userStatus="warning" text="无权限"></a-badge>
        </template>

      </a-table>
      <!-- 品牌信息查看 -->
      <brand-info @close="handleBrandInfoClose" :brandInfoVisiable="brandInfo.visiable" :brandInfoData="brandInfo.data">
      </brand-info>
      <!-- 新增品牌 -->
      <brand-add @close="handleBrandAddClose" @success="handleBrandAddSuccess" :brandAddVisiable="brandAdd.visiable"
        :brandInstId="this.queryParams.instId" :brandCodeData="this.dataSource.select">
      </brand-add>
      <!-- 品牌导入 -->
      <brand-import @close="handleBrandImportClose" :brandUploadVisiable="brandUpload.visiable"
        :brandInstId="this.queryParams.instId">
      </brand-import>
      <!-- 型号管理 -->
      <model ref="modelAdmin" @close="handleModelAdminClose" :modelAdminVisiable="modelAdmin.visiable"
        :brandInstId="this.queryParams.instId">
        >
      </model>
      <!-- 修改品牌 -->
      <brand-edit ref="brandEdit" @close="handleBrandEditClose" @success="handleBrandEditSuccess"
        :brandEditVisiable="brandEdit.visiable" :brandInstId="this.queryParams.instId"
        :brandCodeData="this.dataSource.select">
      </brand-edit>
    </div>
  </a-card>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
import BrandAdd from './BrandAdd'
import BrandInfo from './BrandInfo'
import BrandEdit from './BrandEdit'
import Model from './Model'
import BrandImport from "./BrandImport";
import { mapState } from "vuex"

export default {
  name: "Brand",
  components: { RangeDate, BrandAdd, BrandInfo, BrandEdit, Model, BrandImport },
  data() {
    return {
      advanced: false,
      brandInfo: {
        visiable: false,
        data: {}
      },
      brandAdd: {
        visiable: false
      },
      brandUpload: {
        visiable: false
      },
      brandEdit: {
        visiable: false
      },
      modelAdmin: {
        visiable: false,
        brandCode: '',
        data: []
      },
      queryParams: {
        brandCND: '',
        instId: ''
      },
      dataSource: [],
      sortedInfo: null,
      paginationInfo: null,
      selectedRowKeys: [],
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: false,
      instIdData: [],
      da: []
    }
  },
  computed: {
    ...mapState({
      user: state => state.account.user,

    }),
    columns() {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || {}
      let { filteredInfo } = this
      filteredInfo = filteredInfo || {}
      return [{
        title: '终端型号操作',
        dataIndex: 'modelOperation',
        scopedSlots: { customRender: 'modelOperation' }
      }, {
        title: '终端品牌代码',
        dataIndex: 'brandCode',
        scopedSlots: { customRender: 'brandCode' },
      }, {
        title: '终端品牌名称',
        dataIndex: 'brandName',
        scopedSlots: { customRender: 'brandName' },

      }, {
        title: '终端品牌描述',
        dataIndex: 'brandDesc',
        scopedSlots: { customRender: 'brandDesc' },

      }, {
        title: '联系人姓名',
        dataIndex: 'contactName',
        scopedSlots: { customRender: 'contactName' },

      }, {
        title: '联系电话',
        dataIndex: 'contactPhone',
        scopedSlots: { customRender: 'contactPhone' },

      }, {
        title: '联系人电子邮箱',
        dataIndex: 'contactEmail',
        scopedSlots: { customRender: 'contactEmail' },

      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          switch (text) {
            case '00':
              return <a-tag color="cyan" > 非正式 </a-tag>
            case '01':
              return <a-tag color="pink" > 正式 </a-tag>
            case '02':
              return <a-tag color="pink" > 停用 </a-tag>
            case '03':
              return <a-tag color="pink" > 已注销 </a-tag>
            default:
              return text
          }
        },
        filters: [
          { text: '非正式', value: '00' },
          { text: '正式', value: '01' },
          { text: '停用', value: '02' },
          { text: '已注销', value: '03' }
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.status || null,
        onFilter: (value, record) => record.status.includes(value)
      }, {
        title: '审核状态',
        dataIndex: 'auditStatus',
        customRender: (text, row, index) => {
          switch (text) {
            case '00':
              return <a-tag color="cyan" > 待提交审批 </a-tag>
            case '01':
              return <a-tag color="pink" > 新增-审批流程中 </a-tag>
            case '02':
              return <a-tag color="pink" > 新增-审批通过 </a-tag>
            case '03':
              return <a-tag color="pink" > 新增-审批拒绝 </a-tag>
            case '11':
              return <a-tag color="cyan" > 注销-审批流程中 </a-tag>
            case '12':
              return <a-tag color="pink" > 注销-审批通过 </a-tag>
            case '13':
              return <a-tag color="pink" > 注销-审批拒绝 </a-tag>
            case '21':
              return <a-tag color="pink" > 停用-审批流程中 </a-tag>
            case '22':
              return <a-tag color="cyan" > 停用-审批通过 </a-tag>
            case '23':
              return <a-tag color="pink" > 停用-审批拒绝 </a-tag>
            case '31':
              return <a-tag color="pink" > 启用-审批流程中 </a-tag>
            case '32':
              return <a-tag color="pink" > 启用-审批通过 </a-tag>
            case '33':
              return <a-tag color="cyan" > 启用-审批拒绝 </a-tag>
            case '41':
              return <a-tag color="pink" > 修改-审批流程中 </a-tag>
            case '42':
              return <a-tag color="pink" > 修改-审批通过 </a-tag>
            case '43':
              return <a-tag color="pink" > 修改-审批拒绝 </a-tag>
            default:
              return text
          }
        },
        filters: [
          { text: '待提交审批', value: '00' },
          { text: '新增-审批流程中', value: '01' },
          { text: '新增-审批通过', value: '02' },
          { text: '新增-审批拒绝', value: '03' },
          { text: '注销-审批流程中', value: '11' },
          { text: '注销-审批通过', value: '12' },
          { text: '注销-审批拒绝', value: '13' },
          { text: '停用-审批流程中', value: '21' },
          { text: '停用-审批通过', value: '22' },
          { text: '停用-审批拒绝', value: '23' },
          { text: '启用-审批流程中', value: '31' },
          { text: '启用-审批通过', value: '32' },
          { text: '启用-审批拒绝', value: '33' },
          { text: '修改-审批流程中', value: '41' },
          { text: '修改-审批通过', value: '42' },
          { text: '修改-审批拒绝', value: '43' }
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.auditStatus || null,
        onFilter: (value, record) => record.auditStatus.includes(value)

      }, {
        title: '型号数量',
        dataIndex: 'modelNum',
        scopedSlots: { customRender: 'modelNum' },
      }, {
        title: '法人行',
        dataIndex: 'instId',
        scopedSlots: { customRender: 'instId' },
      }, {
        title: '终端品牌操作',
        dataIndex: 'brandOperation',
        fixed: 'right',
        scopedSlots: { customRender: 'brandOperation' }
      }]
    }
  },
  mounted() {
    this.$get('admin/upmporg/getInstList').then((r) => {
      this.instIdData = r.data
    })
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    add() {
      this.brandAdd.visiable = true
    },
    upload() {
      this.brandUpload.visiable = true
    },
    handleInstChange(value) {
      this.queryParams.instId = value;
      if (value != "") {
        let params = {}
        params.instId = value;
        this.$get('terminalAdmin/', { ...params }).then((r) => {

          this.dataSource = r.data.rows;
          this.search();
        })
      }
    },

    terminalModelAdmin(record) {
      let params = {}
      params.brandCode = record.brandCode

      this.$get('modelAdmin', {
        ...params
      }).then((r) => {
        let data = r.data
        this.$refs.modelAdmin.setTableValues(data, params)
        this.modelAdmin.visiable = true
      })

    },
    handleBrandAddClose() {
      this.brandAdd.visiable = false
    },
    handleBrandAddSuccess() {
      this.brandAdd.visiable = false
      this.$message.success('新增品牌成功')
      this.search()
    },
    handleBrandImportClose() {
      this.brandUpload.visiable = false
      this.search()
    },

    viewBrand(record) {
      this.brandInfo.data = record
      this.brandInfo.visiable = true
    },
    handleBrandInfoClose() {
      this.brandInfo.visiable = false
    },
    editBrand(record) {
      if (record.auditStatus === '01' || record.auditStatus === '11' || record.auditStatus === '21'
        || record.auditStatus === '31' || record.auditStatus === '41') {
        this.$confirm({
          title: '提示',
          content: '申请待审批的数据不允许修改',
        });
      } else {
        this.$refs.brandEdit.setFormValues(record)
        this.brandEdit.visiable = true
      }
    },

    handleModelAdminClose() {
      this.modelAdmin.visiable = false
      this.search()
    },
    handleBrandEditSuccess() {
      this.brandEdit.visiable = false
      this.$message.success('修改品牌成功')
      this.search()
    },
    handleBrandEditClose() {
      this.brandEdit.visiable = false
    },

    search() {
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      let { sortedInfo, filteredInfo } = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }
      let params = {}
      params.instId = this.queryParams.instId
      params.brandCode = this.queryParams.brandCND
      params.brandName = this.queryParams.brandCND
      params.brandDesc = this.queryParams.brandCND

      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...params,
        ...filteredInfo
      })
    },
    reset() {
      // 取消选中
      this.selectedRowKeys = []
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      // 重置列排序规则
      this.sortedInfo = null
      // 重置查询参数
      this.queryParams = {}
      // // 清空时间选择
      // this.$refs.createTime.reset()
      this.fetch()
    },
    handleTableChange(pagination, filters, sorter) {
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }

      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter
      // this.userInfo.visiable = false

      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      })
    },
    fetch(params = {}) {
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$get('terminalAdmin', {
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.dataSource = data.rows
        this.pagination = pagination
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../../../../static/less/Common";
</style>

